<style lang="scss" scoped>
  $height: 45px;
  .input-wrap{
    position: relative;
    width:300px;
    height:$height;
    background:rgba(255,255,255,1);
    cursor: pointer;
  }

  .input-item{
    position: relative;
    width: 100%; height: 100%;
    border:1px solid rgba(150,150,150,1);
  }

  .input{
    border: none;
    outline: none;
    width: 100%; height: 100%;
    color: #969696;
    padding: 0 18px;
    box-sizing: border-box;
    font-size: 16px;
    cursor: pointer;
  }

  .arrow-down{
    position: absolute;
    width: 0; height: 0;
    right: 10px; top: 20px;
    border-top: 5px solid #303641;
    border-bottom: 5px solid transparent;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
  }

  .arrow-up{
    position: absolute;
    width: 0; height: 0;
    right: 10px; top: 13px;
    border-bottom: 5px solid #303641;
    border-top: 5px solid transparent;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
  }

  .input-option-list{
    position: absolute;
    width: 100%; top: $height;
    border: 1px solid #ccc;
    min-height: $height;
    z-index: 10;
  }

  .input-option{
    position: relative;
    box-sizing: border-box;
    padding: 0 10px;
    width:100%;
    height:$height;
    background:rgba(255,255,255,1);
    cursor: pointer;
    border-bottom: 1px solid #f3f3f3;
  }

  .input-option-label{
    float: left; height:$height;
    line-height: $height;
    color: #999;
  }

  .input-option-checked{
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
  }

  .acvtive{
    background-color: #f3f3f3;
  }

 
</style>

<template>
  <div class="input-wrap">
    <div class="input-item" @click.stop="show = !show">
      <input
        class="input"
        readonly
        :type="type" 
        :placeholder="placeholder"
        :value="val">
        <div class="arrow-down" :class="{'arrow-up': show}"></div>
    </div>

    <div class="input-option-list" v-if="show">
      <div class="input-option" @click="select({})">
        <div class="input-option-label">未选择</div>
        <yd-icon name="checkoff" class="input-option-checked" v-if="acvtive == ''"></yd-icon>
      </div>

        <div class="input-option" 
          v-for="(item, index) in options" 
          :key="index"
          @click="select(item, index)"
          :class="{acvtive: acvtive == item.value}">
          <div class="input-option-label">{{item.label}}</div>
          <yd-icon name="checkoff" class="input-option-checked" v-if="acvtive == item.value"></yd-icon>
        </div>
    </div>
      
  </div>
</template>

<script>
  export default {
    data () {
      return {
        show: false,
        acvtive: ''
      }
    },
    mounted () {
      document.addEventListener('click', () => {
        this.show = false
      })
    },
    methods: {
      select (item, index) {
        this.acvtive = item.value
        this.$emit('input', item)
      }
    },
    computed: {
      val () {
        return this.value.label
      }
    },
    props: {
      type: {
        type: String,
        default: 'text'
      },
      placeholder: {
        type: String,
        default: ''
      },
      value: {
        type: Object,
        default () {
          return {
            label: 'hangzhou',
            value: 1
          }
        }
      },
      options: {
        type: Array,
        default () {
          return [{
            label: 'hangzhou',
            value: 1
          }, {
            label: 'wuhan',
            value: 2
          }]
        }
      }
    }
  }
</script>
